<template>
  <div class="order">
    <!-- 占位 -->
    <div style="width: 100%; height: 1.226667rem"></div>
    <like-header title="订单"></like-header>
    <tab-list @tabIndex="getIndex" :tabIndex="tabIndex"></tab-list>
    <order-swiper
      :orderIndex="orderIndex"
      @orderIndex="getOrderIndex"
      ref="orderContent"
    ></order-swiper>
    <!-- 占位 -->
    <div style="width: 100%; height: 50px"></div>
    <bottom-bar ref="bottomBar" class="myBar"></bottom-bar>
  </div>
</template>

<script>
import likeHeader from "../components/like/likeHeader";
import tabList from "../components/order/tabList";
import orderSwiper from "../components/order/orderSwiper";
import bottomBar from "../components/common/bottomBar";
export default {
  components: {
    likeHeader,
    tabList,
    orderSwiper,
    bottomBar,
  },
  data() {
    return {
      orderIndex: 0,
      tabIndex: 0,
      bottomBarH: 0,
    };
  },
  mounted() {
    let y =
      document.body.offsetHeight -
      this.$refs.bottomBar._vnode.elm.offsetHeight -
      this.$refs.orderContent._vnode.elm.offsetTop;
    this.$store.commit("setOrderH", y);
  },
  methods: {
    getIndex(index) {
      //将标题的index传给swiper组件
      this.orderIndex = index;
    },
    getOrderIndex(index) {
      this.tabIndex = index;
      this.orderIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
}
</style>